<!-- 钱包-提现方式 -->
<template>
	<view class="page-box">
		<view class="page-main-box">
			<scroll-view :scroll-x="true" style="white-space: nowrap;">
				<view class="bank-box">
					<view @tap="handleAccountType(0)" v-if="yhkInfo">
						<image style="width: 100%;height: 100%;" :src="images.bankBg1"></image>
						<view>
							<text>银行卡</text>
							<view class="bbbb">
								<view>
									<text>{{yhkInfo.accountName}}</text>
									<text>{{yhkInfo.bankName}}</text>
								</view>
								<text>{{yhkInfo.accountNumber}}</text>
							</view>
						</view>
					</view>
					<view @tap="handleAccountType(1)" v-if="zfbInfo">
						<image style="width: 100%;height: 100%;" :src="images.zfbBg"></image>
						<view>
							<text>支付宝</text>
							<view class="bbbb">
								<view>
									<text>{{zfbInfo.accountName}}</text>
									<text>{{zfbInfo.bankName}}</text>
								</view>
								<text>{{zfbInfo.accountNumber}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="height: 48rpx;"></view>
			<text>{{formData.accountType === 0 ? '银行卡信息' : '支付宝信息'}}</text>
			<view class="form-box">
				<view class="form-box-item">
					<text>真实姓名</text>
					<view>
						<uni-easyinput v-model.trim="formData.accountName" :inputBorder="false" placeholder="请输入真实姓名"
							placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}"></uni-easyinput>
					</view>
				</view>
				<view class="form-box-item" v-if="formData.accountType === 1">
					<text>支付宝账号</text>
					<view>
						<uni-easyinput v-model.trim="formData.accountNumber" type="number" :inputBorder="false"
							placeholder="请输入支付宝账号" placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}">
						</uni-easyinput>
					</view>
				</view>
				<view class="form-box-item" v-if="formData.accountType === 0">
					<text>银行卡号</text>
					<view>
						<uni-easyinput v-model.trim="formData.accountNumber" type="number" :inputBorder="false"
							placeholder="请输入银行卡号" placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}">
						</uni-easyinput>
					</view>
				</view>
				<view class="form-box-item" v-if="formData.accountType === 0">
					<text>开户行</text>
					<view class="text-box" @tap="() => show =true">
						<text class="text">{{formData.bankName ? formData.bankName : '请选择开户行'}}</text>
						<image style="width: 20rpx;height: 20rpx;" src="/static/images/rightIcon.png"></image>
					</view>
				</view>
			</view>
			<view class="form-btn" @tap="handleSubmit()">保存</view>
		</view>

		<u-action-sheet round=40 @select="handleSelect($event,'bankName')" :actions="bankNameList" cancelText="取消"
			:closeOnClickOverlay="true" :safeAreaInsetBottom="true" :closeOnClickAction="true" :show="show"
			@close="show = false">
		</u-action-sheet>
	</view>
</template>

<script>
// 引入图片
import imgs from '@/static/images/index.js'

	import {
		postBindUpdate
	} from '@/api/user.js'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		name: 'wallet',
		data() {
			return {
				images: {},  // 图片组

				show: false,
				bankNameList: [{
					name: '中国工商银行'
				}, {
					name: '中国农业银行'
				}, {
					name: '中国建设银行'
				}, {
					name: '交通银行'
				}, {
					name: '中国银行'
				}],
				formData: {
					accountName: '',
					accountNumber: '',
					bankName: '',
					accountType: 0
				}
			};
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin', 'zfbInfo', 'yhkInfo']),
		},
		async onLoad() {
			this.images = {...imgs}

			await this.handleWallet()
			if (this.yhkInfo) {
				this.handleAccountType(0)
			} else if (this.zfbInfo) {
				this.handleAccountType(1)
			}
		},
		methods: {
			...mapActions(['handleWallet']),
			handleAccountType(e) {
				Object.assign(this.formData, e === 0 ? this.yhkInfo : this.zfbInfo)
				this.formData.accountType = e
			},
			handleSelect({
				name
			}, e) {
				if (e === 'bankName') {
					this.formData.bankName = name
				}
			},
			handleSubmit() {
				const {
					accountName,
					accountNumber,
					bankName,
					accountType,
					id
				} = this.formData
				const {
					id: userId
				} = this.userInfo
				const params = {
					accountName,
					accountNumber,
					accountType,
					userId,
					id
				}
				if (accountType === 0) {
					params.bankName = bankName
				}
				if (!accountName) return uni.showToast({
							duration: 5000,
					title: '请输入真实姓名',
					icon: 'none'
				})
				else if (!accountNumber) return uni.showToast({
							duration: 5000,
					title: '请输入银行卡号',
					icon: 'none'
				})
				else if (accountType === 0 && !bankName) return uni.showToast({
							duration: 5000,
					title: '请选择开户行',
					icon: 'none'
				})
				postBindUpdate(params).then(async () => {
					await this.handleWallet()
					uni.showToast({
							duration: 5000,
						title: '修改成功',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-box {
		position: relative;
		box-sizing: border-box;

		&::before {
			display: inline-block;
			content: '';
			width: 750rpx;
			height: 561rpx;
			background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		}

		.bank-box {
			// position: absolute;
			// left: 32rpx;
			// top: 60rpx;
			display: flex;

			&>view {
				position: relative;
				width: 604rpx;
				height: 308rpx;
				box-sizing: content-box;
				// padding: 30rpx 32rpx;
				color: #FDF3F3;
				margin-right: 16rpx;
				flex-shrink: 0;

				&>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: absolute;
					padding: 30rpx 32rpx;
					width: 100%;
					box-sizing: border-box;
					height: 100%;
					top: 0;
					z-index: 33;

					.bbbb {
						display: flex;
						flex-direction: column;

						&>view {
							font-size: 24rpx;
							margin-bottom: 20rpx;
							display: flex;

							&>text {
								margin-right: 16rpx;
							}
						}

						&>text {

							font-size: 48rpx;
						}
					}
				}

				image {
					position: relative;
					z-index: 2;
				}
			}
		}

		.page-main-box {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: column;
			padding-top: 60rpx;
			align-items: center;

			&>text {
				color: #0F0F0F;
				font-size: 36rpx;
				font-weight: bold;
				align-self: flex-start;
				margin-bottom: 32rpx;
			}
		}

		.bank-bg {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 604rpx;
			height: 308rpx;
			position: relative;
			margin-bottom: 48rpx;

			text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #8C8A8A;
				font-size: 36rpx;
			}
		}

		.form-box {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(210, 211, 213, 0.5);
			border-radius: 40rpx;
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.form-box-item {
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

				&:last-child {
					border: 0;
				}

				&>text {
					width: 180rpx;
					color: #0F0D21;
					font-size: 28rpx;
				}

				&>view {
					flex: 1;

				}
			}

			.text-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #8C8A8A;
				font-size: 28rpx;
			}
		}

		.form-btn {
			margin-top: 48rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
			border-radius: 44rpx;
			color: #FFFFFF;
			opacity: 1;
		}

		::v-deep .uni-easyinput__content-input {
			height: 60rpx !important;
			padding-left: 0 !important;
		}
	}
</style>
